<template>
  <div class="home">
    <Nav></Nav>
    <Location></Location>
    <Date></Date>
    <hot-suggest
      :hotsuggests="hotSuggests"
      v-if="Object.keys(hotSuggests).length"
    ></hot-suggest>
    <Categories></Categories>
    <search-input v-if="topHeight >= 450"></search-input>
    <HomeList></HomeList>
    <!-- 使用按钮加载更多 -->
    <!-- <button class="loadingMore" @click="lodingMore">加载更多</button> -->
    <!-- 默认隐藏的搜索框 -->
  </div>
</template>
<script setup>
import Nav from "./component/nav.vue";
import Location from "./component/location.vue";
import Date from "./component/Date.vue";
import HotSuggest from "./component/hotSuggest.vue";
import useHomeStore from "../../stores/modules/homeStore";
import Categories from "./component/Categories.vue";
import HomeList from "./component/HomeList.vue";
import SearchInput from "./component/SearchInput.vue";

//获取数据
// import myAxios from '../../services/reqquest'
import { ref, watch } from "vue";
import { storeToRefs } from "pinia";

/****************获取hotmessage**********************/

//普通获取数据的方法
// const hotSuggests =ref({});
// myAxios.get({
//   url:"/home/hotSuggests/"
// }).then(res => {
//   hotSuggests.value = res;
// })

//使用pinia获取数据
const store = useHomeStore();
store.getHotSuggest();
const hotSuggests = ref({});
//要使用watch方法进行监听
watch(
  () => store.hotsuggests,
  (newData) => {
    hotSuggests.value = newData;
  }
);

/********************获取categories************************/
store.getCategorie();

/********************获取homList**************************/
store.getHomeList();

// //加载更多:使用按钮进行加载更多
// function lodingMore()
// {
//   store.getHomeList();
// }
//

// const topHeight = document.documentElement.scrollTop;
// const clientHeight = document.documentElement.clientHeight;
// const scrollHeight = document.documentElement.scrollHeight;

// console.log(topHeight, clientHeight, scrollHeight);

//根据监控scoll来进行加载更多
import { scrollLoading } from "../../utils/scrollLoading";
const { topHeight, scrollHeight, clientHeight, isReachBottom } =
  scrollLoading();
watch(isReachBottom, () => {
  console.log("watch isReachBottom被调用");
  store.getHomeList().then((res) => {
    isReachBottom.value = false;
  });
});


</script>


<style lang="less" scoped>
.home {
  margin-bottom: 50px;

  .loadingMore {
    height: 60px;
    width: 60px;
    border-radius: 60px;
    margin-left: 40%;
    background-color: #ff9854;
    color: #fff;
    border: #ff9854;
    cursor: pointer;
  }
}
</style>